<style>
@media print {
  ._wz_transferOwnershipSeeData {
    -webkit-print-color-adjust: exact;
    height: inherit !important;
    font-size: 12px !important;
  }
}
</style>
<template>
  <div class="_wz_transferOwnershipSeeData" ref="transferOwnershipSeeData">
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
      </colgroup>
      <tbody>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">
          基本信息
          <Button type="primary" @click="printTest" class="no-print" style="position: absolute;right: 10px;top: 8px;">
            打印
          </Button>
        </td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;border-top: 0px;">登记编号</td>
        <td style="border-top: 0px;">{{!!formData.transferRecordNumber?formData.transferRecordNumber:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">办理日期</td>
        <td style="border-top: 0px;">{{!!formData.transferDate ? formData.transferDate:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">登记人</td>
        <td style="border-top: 0px;">{{!!formData.transferRegistrantName ? formData.transferRegistrantName:'--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">过户类型</td>
        <td>
          <template v-if="formData.transferType == 1">内转</template>
          <template v-if="formData.transferType == 2">外转</template>
          <template v-if="formData.transferMethodType == 1">（手续）</template>
          <template v-if="formData.transferMethodType == 2">（协议）</template>
        </td>
        <td style="text-align: right;font-weight: 600;">车辆类型</td>
        <td>
          <template v-if="formData.transferModelType == 1">车辆</template>
          <template v-if="formData.transferModelType == 2">挂车</template>
        </td>
        <td style="text-align: right;font-weight: 600;border-top: 0px;">车架号</td>
        <td>{{!!formData.transferVehicleTrailerFrameNo?formData.transferVehicleTrailerFrameNo:'--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">车辆类型</td>
        <td>{{!!formData.transferVehicleTrailerType?formData.transferVehicleTrailerType:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">车辆品牌</td>
        <td>{{!!formData.transferVehicleTrailerBrand?formData.transferVehicleTrailerBrand:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">车辆型号</td>
        <td>{{!!formData.transferVehicleTrailerModel?formData.transferVehicleTrailerModel:'--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">发动机号</td>
        <td>{{!!formData.transferVehicleEngineNumber?formData.transferVehicleEngineNumber:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">动力类型</td>
        <td>{{!!formData.transferVehicleFuelType?formData.transferVehicleFuelType:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">排放标准</td>
        <td>{{!!formData.transferVehicleEmissionStandards?formData.transferVehicleEmissionStandards:'--'}}</td>
      </tr>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">过户信息</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;border-top: 0px;">原车牌号</td>
        <td>{{!!formData.transferVehicleTrailerPlateNo?formData.transferVehicleTrailerPlateNo:'--'}}</td>
        <td style="text-align: right;font-weight: 600;border-top: 0px;">原车主业户</td>
        <td>{{!!formData.transferVehicleTrailerOwnerName?formData.transferVehicleTrailerOwnerName:'--'}}</td>
        <td style="text-align: right;font-weight: 600;border-top: 0px;">原联系电话</td>
        <td>{{!!formData.transferVehicleTrailerOwnerPhone?formData.transferVehicleTrailerOwnerPhone:'--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">现车牌号</td>
        <td>{{!!formData.newVehicleTrailerPlateNo ? formData.newVehicleTrailerPlateNo:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">现车主业户</td>
        <td>{{!!formData.newVehicleTrailerOwnerName ? formData.newVehicleTrailerOwnerName:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">现联系电话</td>
        <td>{{!!formData.newVehicleTrailerOwnerPhone ? formData.newVehicleTrailerOwnerPhone:'--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">原营运证号</td>
        <td>{{!!formData.transferVehicleTrailerOperationCertificateNo?formData.transferVehicleTrailerOperationCertificateNo:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">现营运证号</td>
        <td>{{!!formData.newVehicleTrailerOperationCertificateNo ? formData.newVehicleTrailerOperationCertificateNo:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">运输企业</td>
        <td>{{!!formData.deptName?formData.deptName:'--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">现营运证照</td>
        <td colspan="2">
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%;">
              <img :src="!!formData.newVehicleTrailerOperationCertificateImg?apiUrl.imgUrl+formData.newVehicleTrailerOperationCertificateImg:'../../../assets/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </td>
        <td style="text-align: right;font-weight: 600;">现行驶证照片</td>
        <td colspan="2">
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%;">
              <img :src="!!formData.newVehicleTrailerDrivingLicenseImg?apiUrl.imgUrl+formData.newVehicleTrailerDrivingLicenseImg:'../../../assets/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">过户资料</td>
        <td colspan="5">
          <div style="min-height:50px;">
            <div style="width: 195px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in formData.imgEntityList">
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
                  <img :src="!!item.transferImgUrl?apiUrl.imgUrl+item.transferImgUrl:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
              <div style="line-height: 30px;text-align: center;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;height: 30px;background: #f3f3f3;border-radius: 4px;">
                {{ item.transferImgDescribe }}
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">备注</td>
        <td colspan="5" style="min-height:50px;padding:5px 10px;">{{!!formData.transferRemark ? formData.transferRemark : '--'}}</td>
      </tr>
      </tbody>
    </table>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>
export default {
  props: ["selectData"],
  data() {
    return {
      spinShow: false,//本页加载
      formData: {},
    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this;

    that.spinShow = true;
    that.axios.post(that.apiUrl.webApi + "/management/transfer/transferInfo", {uuid: that.selectData.uuid}).then(res => {
      that.spinShow = false;
      if (!!res) {
        that.formData = res.data.data;
      }
    }).catch(err => {
      console.log("失败", err)
    })

  },
  methods: {//执行的方法

    printTest() {
      this.$print(this.$refs.transferOwnershipSeeData) // 使用
    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_transferOwnershipSeeData {
  > table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px !important;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border: 1px solid #515a6e;
      padding: 0 10px;
      word-break: break-word;
    }
  }

  .demo-upload-list {
    margin: 5px auto;
    width: 195px;
    height: 140px;
    text-align: center;
    line-height: 140px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 0 0 0;

    img {
      min-height: 30%;
      max-height: 90%;
      min-width: 30%;
      max-width: 90%;
      //width: 100%;
      //height: 100%;
    }
  }
}

</style>
